<template>
  <div class="order_message" v-if="orderData.id">
    <ul>
      <!-- 头部信息 -->
      <li class="message_header">
        <div class="header_left">
          <p>{{orderData.arr_date}}</p>
          <span class="time">{{orderData.arr_time}}</span>
          <em class="airport">{{orderData.org_airport_name +orderData.org_airport_quay  }}</em>
        </div>
        <div class="message_center header_center">
          <p>--- 3时5分 ---</p>
          <p>{{orderData.airline_name + orderData.flight_no}}</p>
        </div>
        <div class="header_right">
          <p>{{orderData.org_city_name}} - {{orderData.dst_city_name}}</p>
          <span class="time">{{orderData.dep_time}}</span>
          <em class="airport">{{orderData.dst_airport_name + orderData.dst_airport_quay}}</em>
        </div>
      </li>

      <li class="message_total">
        <p>订单总价</p>
        <div class="message_center">金额</div>
        <p>数量</p>
      </li>
      <li class="message_ticketType">
        <p>成人机票</p>
        <div class="message_center">￥2115</div>
        <p>x1</p>
      </li>
      <li class="message_oil">
        <p>机建 + 燃油</p>
        <div class="message_center">￥50/人/单程</div>
        <p>x1</p>
      </li>
      <li class="message_money">
        <p>应付总额:</p>
        <p class="money_color">￥{{money}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props:['orderData','money']
};
</script>

<style lang="less" scoped>
.order_message {
  margin-top: 30px;
  width: 350px;
  ul {
    border: 1px dashed #ccc;
    height: auto;
    width: 100%;

    li {
      height: 40px;
      border-bottom: 1px dashed #ccc;
      display: flex;
      justify-content: space-between;
      // text-align: center;
      > p {
        width: 85px;
        font-size: 14px;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .message_center {
      line-height: 40px;
        font-size: 14px;
        width: 150px;
        // background: cadetblue;
        text-align: center;
      }
      &:last-child {
        border: none;
      }
    }
  }
  // 头部
  .message_header {
    height: 112px;
    // line-height: 1;
    .header_left,
    .header_right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 16px;
      .time {
        padding: 12px 0 6px 0;
        font-size: 22px;
      }
      .airport {
        font-size: 12px;
        color: #999;
      }
    }
    .header_center {
      margin-top: 60px;
      font-size: 12px;
      color: #999;
      text-align: center;
      p {
        line-height: 1;
      }
    }
  }
  .message_money {
    height: 58px;
    .money_color {
      width: 160px;
      font-size: 28px;
      color: orange;
    }
  }
}
</style>